<template>
	<div class="goods_detail">
		<header class="top_bar">
            <a @click="back" class="icon_back"></a>
            <h3 class="cartname">商品详情</h3>
            <a href="#" class="icon_menu"></a>
        </header>
        <main v-loading="loading1" class="detail_box">
            <section class="banner_box">
                <mu-carousel transition="fade">
                <mu-carousel-item v-for="item in goodsImages" :key="item.image_url">
                    <img :src="item.image_url">
                </mu-carousel-item>
                </mu-carousel>
            </section>
            <section class="product_info clearfix">
                <div class="product_left">
                    <p class="p_name">{{goodsData.product_name}}</p>
                    <div class="product_pric">
                        <span>￥</span>
                        <span class="rel_price">{{goodsData['product_price']}}</span>
                        <span>.00</span>
                    </div>
                    <div class="product_right">
                        降价通知
                    </div>
                </div>

            </section>
            <section class="product_intro">
                <p class="pro_det">
                    {{goodsData.product_detail}}
                </p>
           </section>
          
        </main>
        <footer class="cart_d_footer">
            <div class="m">
                <ul class="m_box">
                    <li class="m_item">
                        <mu-icon style="position: absolute;left: 35px;" value="card_travel"></mu-icon>
                        <p style="width: 80px;height: 100%;position: absolute;left: 10px;top: 30px;">卖家</p>
                        <mu-icon v-if="goodsData.focusf_lag === 0" style="position: absolute;left: 126px;" @click="Focus(goodsData)" value="favorite_border"></mu-icon>
                        <mu-icon v-if="goodsData.focusf_lag === 1" style="position: absolute;left: 126px;color: yellow;" @click="Focus1(goodsData)" value="favorite"></mu-icon>
                        <p style="width: 80px;height: 100%;position: absolute;left: 99px;top: 30px;">关注</p>
                        <mu-icon style="position: absolute;left: 215px;" @click="skipCar" value="add_shopping_cart"></mu-icon>
                        <p style="width: 80px;height: 100%;position: absolute;left: 187px;top: 30px;">购物车</p>
                    </li>
                </ul>
                <div class="btn_box clearfix" >
                    <a @click="carbtn(goodsData)" class="buy_now">加入购物车</a>
                    <a href="#" class="buybuy">立即购买</a>
                </div>
            </div>
        </footer>
	</div>
</template>
<script>
import {mapGetters,mapActions} from 'vuex';
   export default {
        data(){
            return {
                cateGoodsAllData:[],
                goodsImages:[],
                goodsData:{},
                loading1: false,
                id1:'',
                pId: ''
            }
        },
        mounted () {
            this.id1 = JSON.parse(window.sessionStorage.userInfo).user_id
            this.pId = this.$_global.getRouterParams(this.$router).productId
            console.log('this.id1', this.id1)
            this.fetchData()
            this.histories()
        },
        computed:mapGetters(['loading','hideNav', 'getUserInfo']),
        methods:{
            fetchData(){
                this.loading1 = true
                this.$axios.get('/detail?mId='+this.pId).then((res)=>{
                    if (res.status === 1) {
                        this.goodsImages = res.bussdata[0];
                        this.goodsData = res.bussdata[1][0];
                        this.$store.dispatch('hideNav');
                    }
                    this.loading1 = false
                })
            },
            back () {
                this.$router.go(-1)
            },
            carbtn (val) {
                console.log('val', val)
                this.$axios.post('/addCarts', {
                    pruduct: val.product_id,
                    user_id: val.user_id
                }).then(res => {
                    console.log('res',res)
                    if (res.status === 1) {
                        this.$toast.success({
                            position: 'top',
                            message: '加入购物车成功'
                        });
                    } else {
                        this.$toast.error({
                            position: 'top',
                            message: '加入购物车失败'
                        });
                    }
                })
            },
            skipCar () {
                this.$router.push('/cart')
            },
            Focus (val) {
                this.$axios.post('/focusadd', {
                    focus: 1,
                    user_id: this.id1,
                    pruduct: val.shop_id
                }).then(res => {
                    if (res.status === 1) {
                        console.log(res.msg)
                        this.$toast.success({
                            position: 'top',
                            message: res.msg
                        });
                        this.fetchData()
                    } else {
                        console.log(res.msg)
                    }
                })
            },
            Focus1 (val) {
                this.$axios.post('/focusadd', {
                    focus: 0,
                    user_id: this.id1,
                    pruduct: val.shop_id
                }).then(res => {
                    if (res.status === 1) {
                        console.log(res.msg)
                        this.$toast.success({
                            position: 'top',
                            message: '取消关闭成功'
                        });
                        this.fetchData()
                    } else {
                        console.log(res.msg)
                    }
                })
            },
            histories () {
                this.$axios.post('/histories', {
                    history: 1,
                    user_id: this.id1,
                    pruduc: this.pId
                }).then(res => {
                    if (res.status === 1) {
                        console.log(res.msg)
                    } else {
                        console.log(res.msg)
                    }
                })
            }
        }
    }
</script>
<style>
@import '../assets/css/detail.css';
</style>